<template>
  <div class="collections-list">
    <div
        v-for="collection in collections"
        :key="collection.id"
        class="collection-item"
    >
      <div class="collection-main">
        <img :src="collection.icon" :alt="collection.title" class="collection-icon">

        <div class="collection-content">
          <div class="collection-header">
            <div class="title-section">
              <h2>
                <a href="#" class="collection-title">{{ collection.title }}</a>
                <span v-if="collection.link" class="link-icon">🔗</span>
              </h2>
              <p class="collection-description">{{ collection.description }}</p>
            </div>

            <div class="collection-stats">
              <div class="stat-item">
                <span class="stat-icon">👁</span>
                Watch
                <span class="stat-count">{{ collection.watches }}</span>
              </div>
              <div class="stat-item">
                <span class="stat-icon">⑂</span>
                Fork
                <span class="stat-count">{{ collection.forks }}</span>
              </div>
            </div>
          </div>

          <div class="collection-meta">
            <span class="meta-item">
              <span class="meta-icon">📁</span>
              Collection
            </span>
            <span class="meta-item">
              By {{ collection.author }}
              <span v-if="collection.verified" class="verified-badge">✓</span>
            </span>
            <span v-if="collection.tags" class="meta-tags">
              <span
                  v-for="tag in collection.tags"
                  :key="tag"
                  class="tag"
              >
                {{ tag }}
              </span>
            </span>
            <span class="meta-item">Updated on {{ collection.updatedAt }}</span>
            <span class="meta-item">{{ collection.views }} views</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-placeholder">
      <el-pagination
          background
          layout="prev, pager, next"
          :total="100"
          @current-change="fetchCollections">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApiCollectionsList',

  data() {
    return {
      collections: [],
      pagination: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
        totalPages: 0
      }
    }
  },

  methods: {
    async fetchCollections(page = 1) {
      try {
        // 模拟分页API调用
        // const response = await this.$http.get('/api/collections', {
        //   params: {
        //     page: page,
        //     pageSize: this.pagination.pageSize
        //   }
        // });

        // 模拟数据
        const response = {
          data: {
            items: [
              {
                id: 1,
                title: 'Pipedrive API v1',
                description: 'The official Pipedrive API that enables developing apps and integrations on the Pipedrive platform.',
                icon: 'icon/8.png',
                author: 'Pipedrive APIs',
                verified: true,
                tags: ['Developer Productivity'],
                updatedAt: '20 Dec, 2024',
                views: '50k+',
                watches: '12.8k',
                forks: '10k+',
                link: true
              },
              {
                id: 2,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/9.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 3,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/10.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 4,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/11.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 5,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/12.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 6,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/13.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 7,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/14.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
              {
                id: 8,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/7.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              }, {
                id: 9,
                title: 'Plaid API Endpoints',
                description: 'Contains Plaid endpoints and demonstrates core workflows for using Plaid APIs.',
                icon: 'icon/7.png',
                author: 'Plaid',
                verified: true,
                tags: ['Financial Services', 'Payments'],
                updatedAt: '20 Dec, 2024',
                views: '30k+',
                watches: '8.54k',
                forks: '5k+'
              },
            ],
            total: 9  // 模拟总数据量
          }
        };

        this.collections = response.data.items.slice((page - 1) * this.pagination.pageSize, page * this.pagination.pageSize);
        this.pagination.total = response.data.total;
        this.pagination.totalPages = Math.ceil(this.pagination.total / this.pagination.pageSize);

        // 更新当前页
        this.pagination.currentPage = page;
      } catch (error) {
        console.error('Failed to fetch collections:', error);
      }
    },

    changePage(page) {
      if (page < 1 || page > this.pagination.totalPages) return;
      this.fetchCollections(page);
    }
  },

  created() {
    this.fetchCollections(this.pagination.currentPage);
  }
}
</script>

<style scoped>
.collections-list {
  background-color: #F5F5F5; /* 背景改为浅灰色 */
  color: #333333; /* 文本颜色为深灰色 */
  margin-left: 50px; /* 左边距 */
  margin-right: 50px; /* 右边距 */
  margin-top: 80px;
}

.collection-item {
  padding: 24px;
  background-color: #FFFFFF; /* 白色背景 */
  border-radius: 8px; /* 圆角 */
  margin-bottom: 16px; /* 每个条目之间有间距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  transition: background-color 0.3s;
}

.collection-item:hover {
  background-color: #F0F0F0; /* 悬浮时的背景颜色 */
}

.collection-main {
  display: flex;
  gap: 16px;
}

.collection-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
}

.collection-content {
  flex: 1;
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.title-section {
  flex: 1;
}

.collection-title {
  color: #4B9CDB; /* 标题颜色 */
  text-decoration: none;
  font-size: 18px;
  font-weight: 500;
}

.collection-title:hover {
  text-decoration: underline;
}

.link-icon {
  margin-left: 8px;
  opacity: 0.6;
}

.collection-description {
  color: #666666; /* 描述颜色 */
  margin-top: 4px;
  font-size: 14px;
}

.collection-stats {
  display: flex;
  gap: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #999999; /* 浅灰色 */
  font-size: 14px;
}

.stat-count {
  color: #CCCCCC;
}

.collection-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #999999;
  font-size: 13px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.meta-icon {
  opacity: 0.7;
}

.verified-badge {
  color: #4B9CDB;
  margin-left: 4px;
}

.meta-tags {
  display: flex;
  gap: 8px;
}

.tag {
  color: #CCCCCC;
}

.tag:not(:last-child)::after {
  content: ',';
  margin-left: -4px;
}

.pagination-placeholder {
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
}

.pagination-placeholder button {
  background-color: #4B9CDB;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  margin: 0 8px;
  font-size: 14px;
}

.pagination-placeholder button:disabled {
  background-color: #999999;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .collection-header {
    flex-direction: column;
  }

  .collection-stats {
    margin-top: 12px;
  }

  .collection-meta {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}
</style>
